<template>
  <div class="wrapper">
    <div class="year-select">
      <span @click="showYearPicker = true" class="label">年份选择：</span>
      <span @click="showYearPicker = true">{{ queryform.year }}年</span>
      <img src="@/assets/common/arrow-down.png" />
    </div>
    <div class="list">
      <PullRefreshList v-if="ready" ref="PullRefreshList" :limit="page.size" :page-no.sync="page.index" :data.sync="showList" @getList="onLoad">
        <list-item @onDel="onDel(index)" :content="item" v-for="(item, index) in showList" :key="index" />
      </PullRefreshList>
      <div class="btn-group">
        <div class="btn btn-active" @click="linkAddMonth">新增月记实</div>
        <div class="btn btn-active" @click="linkAddWeek">新增周记实</div>
      </div>
      <div class="btn-block"></div>
    </div>
    <van-popup v-model="showYearPicker" position="bottom">
      <van-picker :default-index="yearIndex" title="选择年份" show-toolbar :columns="columns" @confirm="onConfirm" @cancel="showYearPicker = false" />
    </van-popup>
    <van-popup v-model="showMonthPicker" position="bottom">
      <van-picker :default-index="selectedMonth" title="选择月" show-toolbar value-key="remark" :columns="monthColumns" @confirm="onMonthConfirm" @cancel="showMonthPicker = false" />
    </van-popup>
    <van-popup v-model="showWeekPicker" position="bottom">
      <van-picker :default-index="selectedWeek" title="选择周" show-toolbar value-key="remark" :columns="weekColumns" @confirm="onWeekConfirm" @cancel="showWeekPicker = false" />
    </van-popup>
  </div>
</template>

<script>
import { getReportList, getAddReportList, getReportDetail, getMonthReportDetail } from "@/api/report";
import listItem from "./report-item.vue";
import { formatTime } from "@/utils";
import PullRefreshList from "@/components/PullRefreshList";
export default {
  components: {
    listItem,
    PullRefreshList
  },
  data() {
    return {
      showYearPicker: false,
      startYear: 2020,
      yearIndex: 0,
      columns: [],
      monthColumns: [],
      weekColumns: [],
      queryform: {
        deptId: "",
        year: ""
      },
      page: {
        size: 10,
        index: 1
      },
      loading: false,
      finished: false,
      dataList: [],
      showList: [],
      selectedMonth: "",
      selectedWeek: "",
      showMonthPicker: false,
      showWeekPicker: false,
      ready: false
    };
  },
  created() {
    this.queryform.deptId = this.$route.query.deptId;
    let current = new Date();
    let year = current.getFullYear();
    this.queryform.year = year;
    for (let i = this.startYear; i <= year; i++) {
      this.columns.push(i);
    }
    this.yearIndex = this.columns.length - 1;
    this.getData();
  },
  methods: {
    onConfirm(val) {
      this.queryform.year = val;
      this.showYearPicker = false;
      this.getData();
    },
    onLoad(callback) {
      let list = this.dataList.slice((this.page.index - 1) * this.page.size, this.page.index * this.page.size);
      callback(list);
    },
    onWeekConfirm(val) {
      let form = {
        deptId: this.queryform.deptId,
        year: val.year,
        month: val.month,
        week: val.week
      };
      let query = {
        deptId: this.queryform.deptId,
        year: val.year,
        month: val.month,
        week: val.week,
        start: formatTime(val.assessStartTime, "MM月dd日"),
        end: formatTime(val.assessEndTime, "MM月dd日")
      };
      getReportDetail(form).then(res => {
        this.showWeekPicker = false;
        if (!res.data) {
          this.$router.push({
            path: "/normal/addWeek",
            query
          });
        } else {
          if (res.data.isSubmit == "1") {
            this.$router.push({
              path: "/normal/report/detail",
              query: {
                id: res.data.dataId,
                type: 1
              }
            });
          } else {
            query.id = res.data.dataId;
            this.$router.push({
              path: "/normal/addWeek",
              query
            });
          }
        }
      });
    },
    onDel(index) {
      this.showList.splice(index, 1);
      this.dataList.splice(index, 1);
      if (this.dataList.length > this.showList.length) {
        this.showList.push(this.dataList[this.showList.length]);
      }
    },
    onMonthConfirm(val) {
      let form = {
        deptId: this.queryform.deptId,
        year: val.year,
        month: val.month
      };
      let query = {
        deptId: this.queryform.deptId,
        year: val.year,
        month: val.month,
        start: formatTime(val.assessStartTime, "MM月dd日"),
        end: formatTime(val.assessEndTime, "MM月dd日")
      };
      getMonthReportDetail(form).then(res => {
        this.showMonthPicker = false;
        if (!res.data) {
          this.$router.push({
            path: "/normal/addMonth",
            query
          });
        } else {
          if (res.data.isSubmit == "1") {
            this.$router.push({
              path: "/normal/report/detail",
              query: {
                id: res.data.dataId,
                type: 2
              }
            });
          } else {
            query.id = res.data.dataId;
            this.$router.push({
              path: "/normal/addMonth",
              query
            });
          }
        }
      });
    },
    getData() {
      getReportList(this.queryform).then(res => {
        this.dataList = res.data;
        this.ready = true;
        this.$nextTick(() => {
          this.$refs.PullRefreshList.onSearch();
        });
      });
    },
    getColumns(type) {
      let triggerCycle = type == 1 ? "WEEK_DOCUMENTARY" : "MONTH_DOCUMENTARY";
      getAddReportList({ triggerCycle }).then(res => {
        if (type == 1) {
          this.weekColumns = res.data.filter(ele => ele.periodFlag != "2");
          this.selectedWeek = this.weekColumns.findIndex(ele => ele.periodFlag == "1");
          this.showWeekPicker = true;
        } else {
          this.monthColumns = res.data.filter(ele => ele.periodFlag != "2");
          this.selectedMonth = this.monthColumns.findIndex(ele => ele.periodFlag == "1");
          this.showMonthPicker = true;
        }
      });
    },
    linkAddMonth() {
      if (!this.monthColumns.length) {
        this.getColumns(2);
      } else {
        this.showMonthPicker = true;
      }
    },
    linkAddWeek() {
      if (!this.weekColumns.length) {
        this.getColumns(1);
      } else {
        this.showWeekPicker = true;
      }
    }
  }
};
</script>

<style scoped lang="scss">
.wrapper {
  padding: 20px 16px;
  line-height: 20px;
  color: #333;
  font-size: 14px;
}
.year-select {
  display: flex;
  align-items: center;
  .label {
    color: #999999;
    margin-right: 8px;
  }
  img {
    width: 12px;
    margin-left: 8px;
  }
}
.list {
  margin-top: 12px;
  .btn-group {
    position: fixed;
    bottom: 40px;
    width: 100%;
    left: 0;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    box-sizing: border-box;
    .btn {
      width: 160px;
      line-height: 52px;
      border-radius: 12px;
      background: #2492ff;
      text-align: center;
      font-size: 14px;
    }
  }
  .btn-block {
    height: 92px;
    width: 100%;
  }
}
</style>
